<template>
    <div class="times">
        <!-- 开始时间 -->
        <!-- <el-form ref="form" :rules="Formrules" label-width="100px" :model="Form" size="small">
      <el-form-item prop="startDate" label="开始时间 : " v-if="start"> -->
        <el-date-picker
            style="width: 100%"
            v-if="start"
            v-model="Form.startDate"
            type="date"
            :placeholder="Splaceholder"
            :value-format="value_format"
            :format="format"
            :picker-options="startOptions"
            @change="onChangeTime('S')"
        ></el-date-picker>
        <!-- </el-form-item>
      <el-form-item prop="endDate" label="结束时间 : " v-if="end"> -->
        <!-- 结束时间 -->
        <el-date-picker
            style="width: 100%"
            v-if="end"
            v-model="Form.endDate"
            type="date"
            :placeholder="Eplaceholder"
            :value-format="value_format"
            :format="format"
            :picker-options="endtOptions"
            @change="onChangeTime('E')"
        ></el-date-picker>
        <!-- </el-form-item>
    </el-form> -->
    </div>
</template>

<script>
import moment from "moment";
export default {
    data() {
        return {
            Form: {
                startDate: "",
                endDate: ""
            },

            startOptions: {
                // 开始日期选择 限制 
                disabledDate: time => {
                    if (this.Form.endDate) {
                        return (
                            time.getTime() >
                            new Date(moment(this.Form.endDate).format("YYYY-MM-DD HH:mm:ss")).getTime()
                        );
                    }
                }
            },
            endtOptions: {
                // 结束日期选择限制
                disabledDate: time => {
                    if (this.Form.startDate) {
                        return (
                            time.getTime() < new Date(moment(this.Form.startDate).format("YYYY-MM-DD HH:mm:ss")).getTime()
                        );
                    }
                }
            },
        };
    },
    name: "times",
    props: {
        Splaceholder: {
            type: String,
            default: "请选择起始日期"
        },
        Eplaceholder: {
            type: String,
            default: "请选择结束日期"
        },
        format: {
            type: String,
            default: "yyyy-MM-dd"
        },
        value_format: {
            type: String,
            default: "yyyyMMdd"
        },
        startDates: {
            type: String,
            default: null
        },
        endDates: {
            type: String,
            default: null
        },
        end: {
            type: Boolean,
            default: false
        },

        start: {
            type: Boolean,
            default: false
        },
        a: {
            type: String,
            default: ''
        },
        b: {
            type: String,
            default: ''
        },
    },
    watch: {
        a(newVal, oldVal) {
            // console.log("a",newVal)
            if (newVal != oldVal || "") {
                if (!newVal) {
                    this.reset()
                }
            }
        },
        b(newVal, oldVal) {
            // console.log("b",newVal)
            if (newVal != oldVal || "") {
                if (!newVal) {
                    this.reset()
                }
            }
        },
        startDates(newVal, oldVal) {
            // if (newVal === "") {
            //   this.Form.endDate = ""
            //   this.Form.startDate = ""
            // }
            if (newVal != oldVal) {
                this.Form.startDate = newVal;
                if (newVal === "") {
                    this.Form.endDate = ""
                    this.Form.startDate = ""
                }
            }
        },
        endDates(newVal, oldVal) {
            // if (newVal === "") {
            //   this.Form.endDate = ""
            //   this.Form.startDate = ""
            // }
            if (newVal != oldVal) {
                this.Form.endDate = newVal;
                if (newVal === "") {
                    this.Form.endDate = ""
                    this.Form.startDate = ""
                }
            }
        }
    },
    methods: {
        onChangeTime(a) {
            // console.log(this.startDates, this.Form);
            a === "S"
                ? this.$emit("startT", this.Form.startDate)
                : this.$emit("endT", this.Form.endDate);
        },
        reset() {
            // console.log(this.a,this.endDates,this.b,this.startDates);
            if (!this.b && !this.a && !this.endDates && !this.startDates) {
                // console.log("c1");
                this.Form.endDate = ""
                this.Form.startDate = ""
            }

            // if(!this.b && !this.startDates && !this.endDates) {
            // console.log("c2");
            //   this.Form.endDate = ""
            //   this.Form.startDate = ""
            // }
        }

    }
};
</script>

<style lang="scss" scoped>
</style>